<template>
    <div class="online-showroom-container">
        <div class="left">
            <div class="head_title">
                <p>政策中心</p>
                <div class="more">更多<i class="el-icon-right"></i></div>
            </div>
            <div class="content_box">
                <div
                    class="l_item animate__animated animate__fadeInLeft"
                    v-for="item in subCardInfo"
                    :key="item.id"
                >
                    <div class="date">
                        <p>08</p>
                        2021-11
                    </div>
                    <div class="card_img">
                        <img :src="item.imgUrl" />
                    </div>
                    <div class="card_content">
                        <div class="card_content_title">
                            <div class="title">{{ item.title }}</div>
                            <div class="icon" v-if="item.flag">
                                <p>NEW</p>
                            </div>
                        </div>
                        <div class="card_content_desc">{{ item.desc }}</div>
                    </div>
                    <div class="card_icon"><i class="el-icon-right"></i></div>
                </div>
            </div>
        </div>
        <div class="right">
            <div
                class="r_item animate__animated animate__fadeInUp"
                v-for="item in cardInfo"
                :key="item.id"
            >
                <div class="caption">{{ item.title }}</div>
                <div class="sub_title">{{ item.desc }}</div>
                <div class="card_img">
                    <img :src="item.imgUrl" />
                </div>
                <div class="more_icon"><i class="el-icon-right"></i></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "LaborServicePlatform",
    data() {
        return {
            subCardInfo: [
                {
                    id: 1,
                    flag: true,
                    imgUrl: require("@/assets/images/laborServicePlatform_left_img01.jpg"),
                    title: "《关于落实建设单位工程质量首要责任的实施意见》政策解读",
                    desc: "2021年11月8日，省住房和城乡建设厅印发了《关于落实建设单位工程质量首要责任的",
                },
                {
                    id: 2,
                    flag: false,
                    imgUrl: require("@/assets/images/laborServicePlatform_left_img02.jpg"),
                    title: "《江苏省工程建设项目审批制度改革实施方案》政策解读",
                    desc: "2021年11月8日，省住房和城乡建设厅印发了《关于落实建设单位工程质量首要责任的",
                },
                {
                    id: 3,
                    flag: false,
                    imgUrl: require("@/assets/images/laborServicePlatform_left_img03.jpg"),
                    title: "省住房城乡建设厅关于印发《江苏省建设工程消防设计审查验收",
                    desc: "2021年11月8日，省住房和城乡建设厅印发了《关于落实建设单位工程质量首要责任的",
                },
                {
                    id: 4,
                    flag: false,
                    imgUrl: require("@/assets/images/laborServicePlatform_left_img04.jpg"),
                    title: "《江苏省燃气管理条例》解读",
                    desc: "2021年11月8日，省住房和城乡建设厅印发了《关于落实建设单位工程质量首要责任的",
                },
            ],
            cardInfo: [
                {
                    id: 1,
                    imgUrl: require("@/assets/images/laborServicePlatform_right_icon01.png"),
                    title: "供求关系搭桥",
                    desc: "劳动资源优化配置",
                },
                {
                    id: 2,
                    imgUrl: require("@/assets/images/laborServicePlatform_right_icon02.png"),
                    title: "信用管理",
                    desc: "保障消费者权益",
                },
            ],
        };
    },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/mixin.less";
.online-showroom-container {
    color: #ffffff;
    .main-bg();
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 30px;
    .left {
        height: 100%;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        .head_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            p {
                font-size: 16px;
                color: #222222;
                font-weight: 600;
            }
            .more {
                font-size: 14px;
                color: #aaaaaa;
                cursor: pointer;
                i {
                    margin-left: 10px;
                }
            }
        }
        .content_box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
        }
        .l_item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #ffffff;
            box-sizing: border-box;
            padding: 0 20px 0 0;
            transition-duration: 0.4s;
            cursor: pointer;
            &:hover {
                transform: scale(1.05);
                box-shadow: 0 0 8px #198dff;
            }
            &:nth-child(2) {
                animation-delay: 0.2s;
            }
            &:nth-child(3) {
                animation-delay: 0.3s;
            }
            &:nth-child(4) {
                animation-delay: 0.4s;
            }
            @media screen and (min-width: 1365px) {
                &:nth-child(4) {
                    display: flex;
                }
            }
            @media screen and (max-width: 1366px) {
                &:nth-child(4) {
                    display: none;
                }
            }
            .date {
                width: 90px;
                height: 90px;
                overflow: hidden;
                text-align: center;
                font-size: 14px;
                color: #666666;
                padding: 14px 0;
                box-sizing: border-box;
                p {
                    color: #222222;
                    font-size: 32px;
                    line-height: 45px;
                }
            }
            .card_img {
                width: 90px;
                height: 90px;
                overflow: hidden;
                object-fit: cover;
            }
            .card_content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin: 0 15px;
                .card_content_title {
                    display: flex;
                    justify-content: space-between;
                    position: relative;
                    .title {
                        flex: 1;
                        color: #222222;
                        font-size: 16px;
                        line-height: 25px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }
                    .icon {
                        width: 50px;
                        height: 20px;
                        background: #ff7f00;
                        color: #000;

                        font-size: 11px;
                        text-align: center;
                        line-height: 20px;
                        transform: skew(-15deg);
                        border-radius: 3px;
                        p {
                            transform: skew(15deg);
                            color: #ffffff;
                        }
                    }
                }
                .card_content_desc {
                    line-height: 20px;
                    margin-top: 5px;
                    color: #666666;
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
            }
            .card_icon {
                color: #999999;
            }
        }
    }
    .right {
        display: flex;
        justify-content: space-between;
        width: 500px;
        position: relative;
        margin-top: 50px;
        .r_item {
            width: 240px;
            box-sizing: border-box;
            height: 100%;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding: 15px 20px 40px;
            transition-duration: 0.4s;
            cursor: pointer;
            &:nth-child(2) {
                animation-delay: 0.2s;
            }
            &:hover {
                box-shadow: 0 0 10px #198dff;
                .btn {
                    height: 30px;
                    line-height: 30px;
                    color: #ffffff;
                    transform: translateY(-2px);
                    box-shadow: 0 0 5px #198dff;
                    background-image: linear-gradient(
                        to right,
                        #198dff,
                        #4dc3ff
                    );
                    border: 0;
                }
            }
            .card_img {
                width: 55px;
                height: 49px;
                margin: 50px auto;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .caption {
                font-size: 16px;
                color: #222222;
                font-weight: 600;
                margin-bottom: 15px;
            }
            .sub_title {
                font-size: 16px;
                color: #98a5b2;
                white-space: nowrap;
            }
            .more_icon {
                .hollow-btn();
                padding: 0 40px;
            }
        }
    }
    @media screen and (min-width: 1365px) {
        .right {
            margin-top: 50px;
        }
    }
    @media screen and (max-width: 1366px) {
        .right {
            margin-top: 0px;
        }
    }
}
</style>